<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>


    <link rel="stylesheet" type="text/css" href="../../css/cms/common/bootstrap-responsive.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/cms/common/ui.jqgrid.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/cms/common/themes/jquery-ui.theme.css"/>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .changeStatus {
            line-height: 10px;
        }

        .custom-label {
            padding: 0 !important;
            font-size: 12px;
            text-align: right;
        }

        .custom-label label {
            font-weight: lighter;
        }

        .modal .row {
            margin-bottom: 5px;
        }
    </style>
    <script type="text/javascript" src="../../js/common/jquery-1.8.0.js"></script>
    <script type="text/javascript" src="../../js/common/bootstrap.js"></script>
    <script type="text/javascript" src="../../js/common/i18n/grid.locale-cn.js"></script>
    <script type="text/javascript" src="../../js/common/jquery.jqGrid.min.js"></script>
    <script type="text/javascript" src="js/rolesAuth.js"></script>
    <script type="text/javascript">

        /**
         * 表单序列化为json
         */
        $.fn.serializeObject = function() {
            var o = {};
            var a = this.serializeArray();
            $.each(a, function() {
                if (o[this.name]) {
                    if (!o[this.name].push) {
                        o[this.name] = [ o[this.name] ];
                    }
                    o[this.name].push(this.value || '');
                } else {
                    o[this.name] = this.value || '';
                }
            });
            return o;
        };

        $(document).ready(function () {
            $("body").height(top.window.document.documentElement.offsetHeight - 105);
            $("#list4").jqGrid({
                url: "/gouda-backend/systemUser/getSystemUsers",
                datatype: "json", //数据来源，本地数据
                jsonReader: {
                    root: "pageModel.data",
                    page: "pageModel.currentPage",
                    total: "pageModel.totalPages",
                    records: "pageModel.totalRows",
                    repeatitems: false
                },
                colNames: ['userId', 'userType', '用户编号', '用户名称', '创建人', '创建时间', '状态', '操作'],
                colModel: [
                    {name:'userId',index: 'userId', hidden : true},
                    {name:'userType',index: 'userType', hidden : true},
                    {name: 'userCode', index: 'userCode', width:'15%', align: 'center'},
                    {name: 'userName', index: 'userName', width:'15%', align: "center"},
                    {name: 'creatorName', index: 'creatorName', width:'15%', align: "center"},
                    {name: 'createTime', index: 'createTime', width:'15%', align: "center"},
                    {name: 'userStatus', index: 'userStatus', width:'15%', align: "center", formatter: function(cellval, rowModel, rowData){
                        var show = '';
                        if(cellval == '0'){
                            show = '停用';
                        }else if(cellval == '1'){
                            show = '启用';
                        }
                        return show;
                    }},
                    {name: 'modify', index: 'id', width:'15%', align: "center"}
                ],
                height: "auto",
                autowidth: true,
                rowNum: 20,
                rowList: [20],
                pager: '#gridPager',
                multiselect: false,
                viewrecords: true,
                gridComplete:function(){ //在此事件中循环为每一行添加修改链接
                    var ids = jQuery("#list4").jqGrid('getDataIDs');
                    for(var i=0; i<ids.length; i++){
                        var id=ids[i];
                        var rowData = jQuery("#list4").jqGrid('getRowData', ids[i]);
                        var modify = "<a href='#' style='color:#f60' onclick='modifyData(" + id + ")'>修改</a>"; //这里的onclick就是调用了上面的javascript函数 Modify(id)

                        var auth = "&nbsp;&nbsp;&nbsp;&nbsp;<a href='#' style='color:#f60' onclick='rolesSet(" + rowData.userId + ")'>角色分配</a>";
                        jQuery("#list4").jqGrid('setRowData', ids[i], { modify: modify + auth});
                    }
                },
                prmNames: {page: "pageNum", rows: "pageSize"}
            }).navGrid("#gridPager",{edit:false,add:false,del:false,search:false});

            $('#queryButton').on('click', function () {
                var userCode = $('#userCode').val();
                var userName = $('#userName').val();
                var userStatus = $('#userStatus').val();
                $("#list4").jqGrid('setGridParam', {
                    datatype: 'json',
                    postData: {
                               'userCode': userCode,
                               'userName': userName,
                               'userStatus': userStatus
                              }, //发送数据
                    page: 1
                }).trigger("reloadGrid"); //重新载入
            });

            $('#addBtnId').on('click', function(){
                var param = {url: '../../systemUser/addUser', async: false};
                param.data = JSON.stringify($('#userAddModel form').serializeObject());
                param.sucFn = function(data){
                    if (data.code == '1') {
                        $('#userAddModel').modal('hide');
                        $("#list4").trigger("reloadGrid");
                    } else {
                        alert('保存失败!错误信息：' + data.msg);
                    }
                };
                requestJSON(param);
            });

            $('#saveBtnId').on('click', function(){
                var param = {url: '../../systemUser/modifyUser', async: false};
                param.data = JSON.stringify($('#userModifyModel form').serializeObject());
                param.sucFn = function(data){
                    if (data.code == '1') {
                        $('#userModifyModel').modal('hide');
                        $("#list4").trigger("reloadGrid");
                    } else {
                        alert('保存失败!错误信息：' + data.msg);
                    }
                };
                requestJSON(param);
            });
        });

        function addUser() { //单击添加链接的操作
            $('#userAddModel').modal('show');
        }

        function modifyData(id) { //单击修改链接的操作
            var rowData = jQuery("#list4").jqGrid('getRowData', id);
            $('#userId').val(rowData.userId);
            var userStatus = rowData.userStatus;
            if('停用' === userStatus){
                $("#modifyUserStatus option:eq(0)").attr('selected','selected');
            }else{
                $("#modifyUserStatus option:eq(1)").attr('selected','selected');
            }
            $('#modifyUserName').val(rowData.userName);
            $('#userModifyModel').modal('show');
        }

        /**
         * jQuery ajax请求
         */
        function requestJSON(param) {
            $.ajax({
                type : param.type ? param.type : 'POST',
                url : param.url,
                headers : param.header ? param.header : {'Accept' : 'application/json', 'Content-Type' : 'application/json'},
                dataType : param.dataType ? param.dataType : 'JSON',
                data : param.data,
                async : param.async ? true : false,
                contentType : param.contentType ? param.contentType : 'application/json',
                success : param.sucFn,
                error : param.ErrFn
            });
        }

    </script>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <form>
            <div class="col-xs-2 col-sm-2 col-md-2 col-md-2 col-lg-2" style="width:180px;">
                <input id="userCode" name="userCode" type="text" class="input-medium form-control"
                       placeholder="用户编码">
            </div>
            <div class="col-xs-2 col-sm-2 col-md-2 col-md-2 col-lg-2" style="width:180px;">
                <input id="userName" name="userName" type="text" class="input-medium form-control"
                       placeholder="用户名称">
            </div>
            <div class="col-xs-2 col-sm-2 col-md-2 col-md-2 col-lg-2" style="width:180px;">
                <select class="input-small  form-control" id="userStatus" name="userStatus">
                    <option value="0">停用</option>
                    <option value="1" selected>启用</option>
                </select>
            </div>
            <div class="col-xs-2 col-sm-2 col-md-2 col-md-2 col-lg-2">
                <a class="btn btn-primary form-control" id="queryButton" style="width: 100px">查询</a>
            </div>
            <div class="col-xs-2 col-sm-2 col-md-2 col-md-2 col-lg-2">
                <a class="btn btn-primary form-control" style="width: 100px" onclick="addUser()">新增</a>
            </div>
        </form>
    </div>
</div>

<div class="modal fade" id="userAddModel" tabindex="-1" role="dialog" aria-labelledby="txtModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close">
                    <span>&times;</span>
                </button>
                <h4 class="modal-title">用户添加</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label class="col-lg-2 control-label">用户编码</label>
                            <div class="col-lg-10">
                                <input type="text" class="form-control" id="userCodeAdd" name="userCodeAdd" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-2 control-label">用户名称</label>
                            <div class="col-lg-10">
                                <input type="text" class="form-control" id="userNameAdd" name="userNameAdd" />
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="addBtnId">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="userModifyModel" tabindex="-1" role="dialog" aria-labelledby="txtModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close">
                    <span>&times;</span>
                </button>
                <h4 class="modal-title" id="txtModalLabel">用户修改</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <form class="form-horizontal">
                        <input type="hidden" class="form-control" id="userId" name="userId" />
                        <div class="form-group">
                            <label class="col-lg-2 control-label">用户名称</label>
                            <div class="col-lg-10">
                                <input type="text" class="form-control" id="modifyUserName" name="modifyUserName" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-2 control-label">用户密码</label>
                            <div class="col-lg-10">
                                <input type="text" class="form-control" id="modifyUserPassword" name="modifyUserPassword" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-2 control-label">用户状态</label>
                            <div class="col-lg-10">
                                <div class="input-group">
                                    <select class="input-small form-control" style="WIDTH: 444px"  id="modifyUserStatus" name="modifyUserStatus">
                                        <option value="0">停用</option>
                                        <option value="1">启用</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="saveBtnId">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="authRoleModel" tabindex="-1" role="dialog" aria-labelledby="txtModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close">
                    <span>&times;</span>
                </button>
                <h4 class="modal-title">分配角色</h4>
            </div>
            <form class="form-horizontal">
                <div class="modal-body">
                    <input type="hidden" class="form-control" id="authUserId" name="authUserId" />
                    <input type="hidden" class="form-control" id="rolesStr" name="rolesStr"/>
                    <table id="roleListTable"></table>
                    <div id="roleGridPager"></div>
                </div>
            </form>

            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="saveAuthRoles();">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<br>
<table id="list4"></table>
<div id="gridPager"></div>

<!-- Modal -->

</body>
</html>